<template>
  <el-pagination
    style="margin: 10px 0"
    background
    :layout="layout"
    v-model:current-page="pageNumChange"
    v-model:page-size="pageSizeChange"
    :page-sizes="pageSizes"
    :total="total"
    @current-change="currentChange"
    @size-change="sizeChange"
  />
</template>

<script setup lang="ts">
/* 父组件给子组件传递的数据 */
import {computed} from "vue";

const props = defineProps({
  pageNum: {type: Number, default: 1},
  pageSize: {type: Number, default: 5},
  pageSizes: {type: Array, default: () => [5, 10, 20, 50]},
  layout: {type: String, default: "total, sizes, prev, pager, next, jumper"},
  total: {type: Number, default: 0}
})

/* 子组件给父组件传递数据 */
const emit = defineEmits(['update:pageNum', 'update:pageSize', "getData"])

const pageNumChange = computed({
  get() {
    return props.pageNum
  },
  set: (val) => {
    // v-model:page-num="queryForm.pageNum"
    emit("update:pageNum", val)
  }
})

const pageSizeChange = computed({
  get: () => props.pageSize,
  set: (val) => {
    // v-model:page-size="queryForm.pageSize"
    emit('update:pageSize', val)
  }
})

const currentChange = () => {
  // @getData="getXxxList"
  emit('getData')
}

const sizeChange = () => {
  // 将pageSize改成1
  emit("update:pageNum", 1)
  emit('getData')
}
</script>
